<template>
    <el-tree
            :data="list"
            :props="defaultProps"
            :icon-class="'fa fa-angle-right'"
            node-key="index"
            :highlight-current="currentState"
            :current-node-key="currentNodeKeyVal"
            :default-expanded-keys="currentNodeParentKeyVal"
            :key="treeKey"
            accordion
            @node-click="handleNodeClick"
            ref="vuetree"
            v-if="reLoad"
    ><!-- v-if="data.hasChildren"-->
        <div class="custom-tree-node" slot-scope="{ node, data }">
            <router-link
                    class="menu-link"
                    :to="{ name: data.entity.url,params:{'menuId': data.entity.menuId, breadName: data.name} }"
                    v-if="data.entity.url && code !== 'data'"
            >
                <i :class="data.entity.icon"></i>
                {{data.name}}
            </router-link>
            <template v-else>
                <i :class="data.entity.icon"></i>
                {{data.name}}
            </template>
        </div>
    </el-tree>
</template>

<style scoped lang="stylus">
    .router-link-exact-active {
        background-color: #265797;
    }

    .menu-link {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 2;
        outline: none; //解决刷新缓存后出现白边(火狐)
    }

    .custom-tree-node {
        width: 100%;
        height: 40px;
        line-height: 40px;
    }

    .el-tree {
        background: transparent;

        .custom-tree-node i {
            display: inline-block;
            width: 35px;
            text-align: center;
        }
    }

    >>> .el-tree-node__content {
        position: relative;
        height: 40px;
        font-size: 16px;
        color: #fff;
        border-bottom: 1px solid #162953;

        .el-tree-node__expand-icon {
            position: absolute;
            right: 10px;
            font-size: 24px;
            color: #fff;
            z-index: 3;
            top:0
        }

        .el-tree-node__expand-icon.is-leaf {
            color: transparent;
            cursor: default;
        }
    }
</style>

<script>
    export default {
        name: "pageLeftTree",
        inject: ['reload'],
        props: {
            currentState: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            isTreeData: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            menuId: {
                type: String, Number,
                default: () => {
                    return ''
                }
            },
            nodeKeyIndex: {
               type: String,
               default: function () {
                   return ''
               }
            },
            spreadIndex: {
                type: String,
                default: function () {
                    return ''
                }
            },
            code: {
                type: String,
                default: function () {
                    return "normal"
                }
            },
            list: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        watch: {
            '$route.query': function(val) {
                const $this = this

                if (!val.menuId) return

                $this.filterCurrentLine($this.list, val.menuId)

                $this.treeKey++
                // $this.resetTreeMenu()

            },
            currentNodeKeyVal: function(val) {

                const $this = this

                const menuId = $this.$route.query.menuId || $this.$route.params.menuId

                if (!menuId || !val) return

                $this.currentNodeParentKeyVal = []

                if(this.filterMin){

                    $this.currentNodeParentKeyVal.push(this.filterMin)
                    
                }

            },
            list: function (val) {

                const $this = this
                //console.log('list====', val)
                $this.addLevelForData(val, 0)

                $this.setIndex(val, val.index)

                const menuId = $this.$route.query.menuId || $this.$route.params.menuId

                if (menuId && menuId !== '51') {

                    this.filterCurrentLine(val, menuId)

                } else {
                    $this.$emit('selectedAreaId', val[0].entity.areaId)
                    $this.currentNodeKeyVal = '0-0'
                    $this.currentNodeParentKeyVal = ['0-0']
                }

                $this.treeKey++
                //console.log('data======', val)

            }
        },
        data() {
            return {
                defaultProps: {
                    // 层叠菜单默认传参格式
                    index: "index",
                    children: "children",
                    label: "name",
                    icon: "icon"
                },
                order: 0,
                reLoad: true,
                visited: false,
                isReload: false,
                items: null,
                itemsNode: null,
                currentNodeKeyVal: '',
                filterMin: '',
                currentNodeParentKeyVal: ['0-0'],
                requestSwitch: false,
                treeKey: 0
            }
        },
        created() {

            const $this = this

            if (!$this.$route.query.menuId) {

                $this.currentNodeKeyVal =  $this.nodeKeyIndex

            }

        },
        methods: {
            /**
             * 给菜单添加level
             * @param obj
             * @param level
             */
            addLevelForData(obj, level) {
                const $this = this
                let levela = level + 1

                if (!obj.length > 0) {
                    return
                }

                for (var i = 0; i < obj.length; i++) {

                    obj.map(function (item) {

                        item.level = levela

                        if (item.hasChildren) {

                            $this.addLevelForData(item.children, levela)

                        }
                    })
                }

            },

            filterCurrentLine(obj, id) {
                const $this = this

                if (!obj) return

                obj.filter((item) => {

                    if (item.id === id) {

                        $this.currentNodeKeyVal = item.index

                        $this.currentNodeParentKeyVal = item.parentIndex ? [item.parentIndex] : ['0','0']
                       // console.log('$this.currentNodeKeyVal=', $this.currentNodeKeyVal)
                       $this.filterMin = item.parentIndex 

                        if ($this.code !== 'data') {

                            $this.$router.push({ name: item.entity.url })

                        }

                        $this.$emit('selectedAreaId', item.entity.areaId)

                        return true

                    } else {

                        $this.filterCurrentLine(item.children, id)

                    }
                })
            },
            setIndex(obj, parentId, type) {
                const $this = this

                if (!obj.length > 0) {

                    return

                }

                obj.map(function (item, index) {
                    // $this.order += 1
                    //item.index = `${item.level - 1}-${index}`
                    item.index = `${item.level - 1}-${type ? item.id : index}`

                    item.parentIndex = parentId

                    if (item.children && item.children.length > 0) {

                        $this.setIndex(item.children, item.index, 'c')

                    } else {

                        delete item['children']

                    }
                })

            },
            handleNodeClick(row, node, position) {

                //const $this = this

                // if ($this.requestSwitch) return

                // $this.requestSwitch = true

                // setTimeout(() => {

                //     $this.requestSwitch = false

                // }, 500)

                $(position.$el).siblings().removeClass('is-current')

                this.$emit("handleNodeClick", row, position)

                // if (this.code === "data") return

                // $this.reload()

            }
        },
        //测试使用
        destroyed() {
            this.$el = null;
        }
    };
</script>
